<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>View Cart</title>
  <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="../css/aboveTool.css" type="text/css" media="screen"/>
  <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<body>
<div th:replace="common/IncludeTop::header"></div>
<div id="Content">
  <div id="BackLink">
    <a href="viewMain">Return to Main Menu</a>
  </div>
  <br>
  <div id="Catalog">
    <div>
      <script type="text/javascript">
        $(document).ready(function(){
          $("#Catalog").hide().fadeIn();
        });
      </script>
    </div>
    <div id="Cart">

      <h2>Shopping Cart</h2>
        <table>
          <tr>
            <th><b>Item ID</b></th>
            <th><b>Product ID</b></th>
            <th><b>Description</b></th>
            <th><b>In Stock?</b></th>
            <th><b>Quantity</b></th>
            <th><b>List Price</b></th>
            <th><b>Total Cost</b></th>
            <th>&nbsp;</th>
          </tr>

          <tr th:if="${session.cart.numberOfItems == null}">
            <td colspan="8"><b>Your cart is empty.</b></td>
          </tr>

          <tr class="cartItem" th:each="cartItem:${session.cart.cartItemList}">
            <td>
              <a th:href="@{'/catalog/viewItem?itemId='+${cartItem.item.itemId}}" th:text="${cartItem.item.itemId}">${cartItem.item.itemId}</a>
            </td>
            <td th:text="${cartItem.item.product.productId}">${cartItem.item.product.productId}</td>
            <td th:text="
            (${cartItem.item.attribute1}?${cartItem.item.attribute1}:'')+' '+
            (${cartItem.item.attribute2}?${cartItem.item.attribute2}:'')+' '+
            (${cartItem.item.attribute3}?${cartItem.item.attribute3}:'')+' '+
            (${cartItem.item.attribute4}?${cartItem.item.attribute4}:'')+' '+
            (${cartItem.item.attribute5}?${cartItem.item.attribute5}:'')+' '+
            ${cartItem.item.product.name}">
              ${cartItem.item.attribute1} ${cartItem.item.attribute2}
              ${cartItem.item.attribute3} ${cartItem.item.attribute4}
              ${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
            <td th:text="${cartItem.inStock}">${cartItem.inStock}</td>
            <td>
              <input type="text" id="quantity" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}"/>
            </td>
            <td th:text="'$'+${#numbers.formatDecimal(cartItem.item.listPrice, 1, 'COMMA', 2, 'POINT')}">
            </td>
            <td th:id="${cartItem.item.itemId}" th:text="'$'+${#numbers.formatDecimal(cartItem.total, 1, 'COMMA', 2, 'POINT')}" class="td"></td>
            <td>
              <a th:href="@{'/cart/removeItemFromCart?workingItemId='+${cartItem.item.itemId}}" class="Button">Remove</a>
            </td>
          </tr>

          <tr>
            <td colspan="7">
              Sub Total:
              <span id="subtotal" th:with="number=${session.cart.subTotal}" th:text="'$'+${#numbers.formatDecimal(number, 1, 'COMMA', 2, 'POINT')}">cart.subTotal</span>
            </td>
            <td>&nbsp;</td>
          </tr>
        </table>
      <a th:if="${session.cart.numberOfItems} gt 0" th:href="@{/order/newOrderForm}" class="Button" id="button1">Proceed to Checkout</a>
    </div>

    <div id="MyList" th:if="${session.account} ne null and !${session.authenticated} and !${session.account.listOption}" th:replace="cart/IncludeMyList::MyList"></div>

    <div id="Separator">&nbsp;</div>
  </div>

  <script type="text/javascript" src="../js/Cart.js"></script>
</div>
<div th:replace="common/IncludeBottom::footer"></div>
</body>
</html>